Developing for Windows Phone and Xbox Live : Sprites and 2D Graphics - Rendering Text

12/1/2010 5:45:57 PM

Another important reason to use the sprite batch is to render text to the screen. Notice a DrawString method on the sprite batch object, which is the method you use to draw the text. Before you get there, you need to do a few extra steps.

First, add a new item to your content project by right-clicking the project and selecting Add->New Item. In the dialog box, select the option to add a Sprite Font, name it Game, and click the Add button. Visual Studio opens this file, which is simply a standard XML file.

The first node of note is the FontName node, which (as expected) is the name of the font. The default here is Kootenay although we personally like Comic Sans MS. Select a font (browse through your fonts folder), and type the font name in the node. The next node is Size, which is how large you want the font to be. The default here is 14, but you can choose any size you’d like. The size roughly matches what you see if you change the font size in a text editor such as notepad. The sample with the downloadable examples is a size of 48.

Next is Spacing, which enables you to control how the letters are laid out when they draw. The default value is zero, so no extra spacing is placed between characters as they draw, but changing the value adds extra space (in pixels) between characters. It’s even possible to use a negative number to remove space between characters. Hand in hand with spacing, the next node is called UseKerning and controls whether kerning is used when rendering the text. Kerning changes how the spacing between characters is laid out. Rather than a fixed amount of space between each character, the amount of space depends on the character that comes before and the character that comes after. The default is true because in most cases it just looks better that way.

Next is the Style node, which enables you to choose what the style of the font. The default is Regular, but you can also choose Bold, Italic, or if you are adventurous, choose Bold, Italic. Note that these styles are case sensitive.

The last set of nodes controls which characters you expect to draw. The default includes all English characters (ASCII codes 32 through 126). To draw characters beyond this range, you can update the values here.

Now it’s time to get some text on the screen. First, add a new variable to the class to hold the font data:

SpriteFont font;

Then, load the new font in your LoadContent method:

font = Content.Load<SpriteFont>("Game");

Finally, replace your Draw method with the following to see how easy it is to add text rendering to your games:

GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.DrawString(font,"XNA Game Studio 4.0", Vector2.Zero, Color.White);
spriteBatch.End();
base.Draw(gameTime);

Everything except the DrawString should be quite familiar by now. There are a number of DrawString overloads, many of which mirror ones you saw earlier for rendering images rather than text. The DrawString methods do not take a Texture2D, but instead take a SpriteFont to get the font data. They also include an extra parameter that is either a string or a StringBuilder that is the text you want to render. They do not, however, include a destination rectangle or a source rectangle (because these do not make sense when rendering text). All other parameters to Draw exist in the overloads of DrawString, however, so you can freely scale, rotate, color, and layer your text rendering.

The sprite font object has a few methods and properties that are somewhat interesting. For example, what if you wanted to draw a second line of text just below the line you’ve already drawn? How would you know where to begin? Add the following lines of codes to your Draw method directly below the DrawString call:

Vector2 stringSize = font.MeasureString("XNA Game Studio 4.0");
spriteBatch.DrawString(font, "rocks!", new Vector2(0,stringSize.Y), Color.White);

Here, you use the MeasureString method on the sprite font object, which calculates the size (in pixels) that the rendered string takes up. You can then use that size to start the next line of text rendered down by an appropriate number of pixels. Running the application now shows you two lines of text as in Figure 1.